#app {
    ul {
        li {
            display: flex;
            justify-content: center;
            // item在交叉轴上的布局方式。
            align-items: stretch; //（默认值）如果项目未设置高度或设为auto，将占满整个容器的高度
            border-bottom: 1px solid #ddd;
            padding: 0.1rem;

            //包裹图片的div
            .img-wrap {
                flex: 2;//2等份的布局
                img {
                    width: 100%;
                    transform: translateY(-0.2rem);
                }
            }
            
            .box {
                font-size: 0.28rem;
                flex: 4;//4等份的布局
                display: flex;
                //规定当前容器子元素在垂直主轴上布局
                flex-direction: column;
                justify-content: space-around; //每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
                align-items: flex-start; //交叉轴的起点对齐
                padding: 0.1rem;

                button {
                    outline: none;
                    border: none;
                    width: 1.5rem;
                    height: 0.6rem;
                    background-color: skyblue;
                    color: white;
                    border-radius: 0.1rem;
                    font-size: 0.28rem;
                }
            }
        }
    }
}